<template>
  <div>
    <div class="movie">
      <div v-for="(item, index) of movies" :key="item.index">
        <h3 @click="handleDetail(index)">{{ index | handleTitle }}</h3>
        <div class="container">
          <Movie-item
            v-for="val of item"
            :key="val._id"
            :item="val"
            @toggle="handleToggle(val._id, val.title)"
          ></Movie-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieItem from "../../components/MovieItem.vue";
import HomeHttp from "../../models/HomeHttp";
export default {
  data() {
    return {
      movies: {},
    };
  },
  components: {
    MovieItem,
  },
  methods: {
    handleToggle(id, name) {
      this.$store.commit("changeName", name);
      this.$router.push(`/detail/${id}`);
    },
    handleDetail(index) {
      console.log(index);
      this.$router.push(`/more?value=${index}`);
    },
  },
  filters: {
    handleTitle(val) {
      console.log(val);
      if (val == "inTheaters") {
        return "正在热映";
      } else if (val == "comingSoon") {
        return "即将上映";
      }
      return val;
    },
  },
  async mounted() {
    try {
      /* var top250 =await HomeHttp.getMovieTop250()
      var inTheaters =await HomeHttp.getMovieIntheaters()
      var comingSoon =await HomeHttp.getMovieComingSoon()
      this.movies ={
        top250:{
          title:top250.data.msg,
          res:top250.data.res.slice(0,3)
        },
        inTheaters:{
          title:inTheaters.data.msg,
          res:inTheaters.data.res.slice(0,3)
        },
        comingSoon:{
          title:comingSoon.data.msg,
          res:comingSoon.data.res.slice(0,3)
        }
      } */
      let movies = {};
      var https = ["top250", "comingSoon", "inTheaters"];
      for (let url of https) {
        let result = await HomeHttp.getMovie(url);
        console.log(result.data.res);
        movies[url] = result.data.res.slice(0,3);
      }
      this.movies = movies;
    } catch (err) {
      // console.log(err);
    }
  },
};
</script>

<style>
h3 {
  line-height: 40px;
}
</style>